<template>
  <div class="message-board-page">
    <!-- 背景 -->
    <BackgroundArea></BackgroundArea>
    <!-- 内容 -->
    <div class="message-content">
      <h1 class="title">留言板</h1>
      <!-- 留言输入框 -->
      <div class="msg-input">
        <el-row :gutter="10">
          <el-col :span="18">
            <el-input v-model="inputValue" placeholder="请输入您的留言" />
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="handleAddMsgClick"
              >发布</el-button
            >
          </el-col>
        </el-row>
      </div>
      <!-- 表格 -->
      <table class="message-table">
        <tr>
          <th class="th-1">留言内容</th>
          <th class="th-2">留言时间</th>
        </tr>
        <tr v-for="item in msgs" :key="item.index">
          <td>{{ item.msg }}</td>
          <td>{{ formatTime(item.timestamp) }}</td>
        </tr>
      </table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="limit"
        :current-page="currentPage"
        @update:current-page="handlePageChange"
      />
    </div>
   
  </div>
</template>

<script setup>
import BackgroundArea from "../../components/background-area/index.vue";
import { formatTime } from "../../utils/formatTime.js";
import { ref, computed } from "vue";
import { addMessage, getMessages } from "../../service/api_message.js";
// 页面数据
const msgs = ref(null);
const total = ref(0);
const limit = ref(15);
const inputValue = ref("");
const currentPage = ref(1);
const offset = computed(() => {
  return (currentPage.value - 1) * limit.value;
});
// 网络请求
function initMsgTable() {
  getMessages({ limit: limit.value, offset: offset.value }).then((res) => {
    const { msgs: msglist, total: num } = res.data;
    msgs.value = msglist;
    total.value = num;
  });
}
// 初始化表
initMsgTable();

// 事件处理
// 添加留言
const handleAddMsgClick = () => {
  if (inputValue.value === "") return alert("留言内容不能为空");
  if (inputValue.value.length >= 20) return alert("留言字数不能超过20");
  const timestamp = new Date().getTime();
  const messageInfo = { msg: inputValue.value, timestamp };
  addMessage(messageInfo).then((res) => {
    if (res.status === 200) {
      ElMessage.success("发布留言成功")
      inputValue.value = "";
      currentPage.value = 1;
      initMsgTable();
    }
  });
};

const handlePageChange = (index) => {
  currentPage.value = index;
  initMsgTable();
};
</script>

<style scoped>
.message-board-page {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.message-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 640px;
  width: 860px;
}
.title {
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  color: rgb(245, 165, 18);
  filter: brightness(2);
  margin-bottom: 20px;
}
.message-table {
  border-left: 1px solid;
  border-top: 1px solid;
  box-sizing: border-box;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 10px;
}

.message-table .th-1 {
  width: 70%;
}
.message-table .th-2 {
  width: 30%;
}

.message-table td,
.message-table th {
  border-right: 1px solid;
  border-bottom: 1px solid;
}
.message-table th {
  background-color: rgba(63, 60, 55, 0.72);
  font-size: 20px;
  padding: 8px;
  font-family: 'Courier New', Courier, monospace;
  color: rgba(189, 172, 172, 0.938);
}

.message-table td {
  text-indent: 1.5em;
  background-color: rgba(255, 255, 255, 0.72);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  padding: 3px;
}

.msg-input {
  margin-bottom: 10px;
}
</style>
